<template>
    <div class="fulls">
        <div class="quit" @click.stop="gosmlas">
            <img src="/static/icon/quitf.png" alt="">
        </div>
        <div class="edpnfhd">
            <el-date-picker v-model="date" type="daterange" @change="srcdat(date)" unlink-panels range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <div class="lenghlist">
            <div v-show="islengh">
                <div class="llls">
                    <img src="/static/images/zaixianrenyuan.png" alt="">
                    <span>在线人员（{{ rylist.length }}）</span>
                </div>
                <div class="llls" v-for="(i, index) in lengh" :key="i.id" @click.stop="onfPoint(i)"
                    :style="{ color: idjh.indexOf(i.id + '_Point') == -1 ? '#fff' : '#2efff2' }">
                    <img :src="i.icon" alt="">
                    <span>{{ i.name }}（{{ i.num }}）</span>
                </div>
            </div>
            <div @click.stop="islengh = !islengh">
                <img src="/static/images/shouqi.png" alt="">
            </div>
        </div>
        <openlayers ref="baseMap" />
    </div>
</template>
<script>
import http from "../utils/http";
import api from "../utils/api";
import openlayers from '@/components/openlayers.vue'
export default {
    name: 'fulls',
    components: {
        openlayers
    },
    data() {
        return {
            date: "",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            idjh: [],
            rylist: [],
            islengh: true,
            lengh: [
                {
                    id: '00x1',
                    icon: '/static/images/faxianzhiwu.png',
                    name: '发现植物',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x2',
                    icon: '/static/images/faxiandongwu.png',
                    name: '发现动物',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x3',
                    icon: '/static/images/fanghuoyinhuan.png',
                    name: '防火隐患',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x4',
                    icon: '/static/images/huoqing.png',
                    name: '火情',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x5',
                    icon: '/static/images/daofacaiyao.png',
                    name: '盗伐采药',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x6',
                    icon: '/static/images/daolie.png',
                    name: '盗猎',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x7',
                    icon: '/static/images/qinzhanlindi.png',
                    name: '侵占林地',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x8',
                    icon: '/static/images/fangmu.png',
                    name: '放牧',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x9',
                    icon: '/static/images/bingchonghai.png',
                    name: '病虫害',
                    num: 0,
                    detail: []
                },
                {
                    id: '00x10',
                    icon: '/static/images/shebeisheshi.png',
                    name: '设备设施',
                    num: 0,
                    detail: []
                }
            ],
            areaId: "",

        }
    },
    created() {
        this.areaId = window.sessionStorage.getItem("areaId");
    },
    mounted() {
        this.getdistribution();
        window.addEventListener('keyup', this.handleKeyUp);
    },
    beforeDestroy: function () {
        // 移除键盘事件监听
        window.removeEventListener('keyup', this.handleKeyUp);
    },
    methods: {
        handleKeyUp: function (event) {
            if (event.keyCode === 27) {
                // ESC键被按下
                this.$router.push('/home/xhjc');
            }
        },
        gosmlas() {
            this.$router.push('/home/xhjc');
        },
        srcdat(daterange) {
            console.log(daterange);
            if (daterange != null && daterange != '') {
                var year = daterange[0].getFullYear();
                var month = daterange[0].getMonth() + 1;
                var date = daterange[0].getDate();
                this.startTime = year + "-" + month + "-" + date;
                var year = daterange[1].getFullYear();
                var month = daterange[1].getMonth() + 1;
                var date = daterange[1].getDate();
                this.endTime = year + "-" + month + "-" + date;
            } else {
                this.startTime = "";
                this.endTime = "";
            }
            this.getdistribution();
        },
        async getdistribution() {
            let res = await http.get(api.distribution, {
                areaId: this.areaId,
                startTime: this.startTime,
                endTime: this.endTime
            })
            if (res.data.code == '200') {

                res.data.data.forEach((e, x) => {
                    this.lengh[x].num = res.data.data[x].number;
                    this.lengh[x].detail = JSON.parse(JSON.stringify(res.data.data[x].detail));
                })
                // idjh
                let idjh = [];
                this.lengh.forEach(e => {
                    if (e.detail.length > 0) {
                        let arr = [];
                        e.detail.forEach((si, x) => {
                            let z = {
                                id: x + 'fsknjdh9022hjshj',
                                borderColor: '',
                                fillColor: '',
                                iconSrc: e.icon,
                                data: {},
                                geojson: { coordinates: [si.lon, si.lat], type: "Point" }
                            }
                            arr.push(z)
                        })
                        this.$refs.baseMap.previewshape(arr, e.id + "_Point");
                        idjh.push(e.id + "_Point");
                        this.idjh = idjh;
                    } else {
                        this.$refs.baseMap.delPoint(e.id + "_Point");
                    }
                })

            }
        },
        onfPoint(data) {
            if (data.num > 0) {
                if (this.idjh.indexOf(data.id + "_Point") == -1) {
                    let arr = [];
                    data.detail.forEach((si, x) => {
                        let z = {
                            id: x + 'fsknjdh9022hjshj',
                            borderColor: '',
                            fillColor: '',
                            iconSrc: data.icon,
                            data: {},
                            geojson: { coordinates: [si.lon, si.lat], type: "Point" }
                        }
                        arr.push(z)
                    })
                    this.$refs.baseMap.previewshape(arr, data.id + "_Point");
                    this.idjh.push(data.id + "_Point");
                } else {
                    this.idjh.splice(this.idjh.indexOf(data.id + "_Point"), 1);
                    this.$refs.baseMap.delPoint(data.id + "_Point");
                }
            }
        },
    }
}
</script>
<style scoped>
.fulls {
    width: 100%;
    height: 100%;
    position: relative;
}

.quit {
    position: absolute;
    top: 0.16rem;
    right: .4rem;
    cursor: pointer;
    z-index: 99;
}

.quit img {
    width: .4rem;
    height: .4rem;
}


.lenghlist {
    min-width: .5rem;
    min-height: .5rem;
    display: flex;
    position: absolute;
    left: 0.4rem;
    bottom: 0.16rem;
    z-index: 3;
    overflow: hidden;
    cursor: pointer;
}

.lenghlist>div:nth-child(1) {
    margin-right: 0.42rem;
    padding: 8px;
    font-size: 16px;
    color: #fff;
    border-radius: 4px 4px 0px 4px;
    border: 1px solid rgba(46, 205, 255, 0.60);
    background: rgba(0, 77, 72, 0.70);
    overflow: hidden;
}

.lenghlist>div:nth-child(1) img {
    width: .22rem;
    height: 0.22rem;
    margin-right: 8px;
}

.llls {
    width: 100%;
    height: 0.25rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.lenghlist>div:nth-child(2) {
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.1rem;
    position: absolute;
    right: 0;
    bottom: .1rem;
    z-index: 2;
}

.edpnfhd {
    position: absolute;
    top: 0.16rem;
    left: 0.4rem;
    z-index: 3;
}
</style>
<style>
.edpnfhd .el-input__inner {
    background: rgba(0, 77, 72, 0.70) !important;
}

.edpnfhd .el-date-editor .el-range-input {
    background: transparent !important;
    color: #fff !important;
}

.edpnfhd .el-range-separator {
    color: #fff !important;
}
</style>